// 在这里写redux的基础代码是为了方便.redux不依赖于react.在任何可以运行js的地方都可以运行redux

// 创建store对象
// applyMiddleware 用来使用中间件的函数
import { createStore, applyMiddleware } from 'redux'

// 引入中间件redux-thunk
import thunk from 'redux-thunk'

// 引入使用redux调试工具的包
import { composeWithDevTools } from 'redux-devtools-extension'
// 定义reducer
function reducer(state = { count: 999, msg: 'hello redux' }, action) {
  console.log('reducer执行了')
  // console.log('reducer函数执行了', state, action)
  // state是store中存储的最新的数据
  // action就是需求对象(描述要修改哪个数据,以及改成什么样子)
  switch (action.type) {
    case 'ADD':
      // 注意:redux中不能直接修改state数据. 按照redux的语法,reducer函数中返回值什么是什么,则store中的数据就被改成了什么
      // state.count = state.count + 1
      const newCount = state.count + 1
      return {
        ...state, //展开state,目的是为了保留其他数据
        // count: 1,
        // msg: 'hello redux'
        count: newCount,
      }
    case 'SUB':
      return {
        ...state, //展开state,目的是为了保留其他数据
        // count: 1,
        // msg: 'hello redux'
        count: state.count - 1,
      }
    case 'SET_MSG':
      return {
        ...state,
        msg: action.target, // action.target是未来要修改msg数据时传入的msg的目标值.target属性名也是随便起的
      }
    // 注意: reducer函数中,必须写一个default.default中必须return state. 因为这段代码才是真正初始化store对象中state数据的代码
    default:
      return state
  }
}
// 创建store,创建store的时候,配置中间件
// 既可以使用中间件,也可以使用redux调试工具
const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)))

store.subscribe(() => {
  //当store中数据发生变化,则这个函数执行
  console.log(store.getState())
})

// 注意: 如果使用了redux-thunk.那么dispatch中才能传入函数.
store.dispatch((dispatch) => {
  // 在这个函数中执行异步.异步成功之后,再调用dispatch触发reducer
  // console.log('hahaha')
  setTimeout(() => {
    // 要让reducer函数执行
    dispatch({ type: 'ADD' })
  }, 1000)
})

store.dispatch({ type: 'ADD' })
